<template>
	<CardWrapper @onCard="onCard" :headStyle="{
		padding:0
	}">
		<template #head>
			<view class="head u-flex u-row-between">
				<view class="head-left u-text-center" :style="[LevelBackgroundStyle]">
					{{data.level | itemPriority}}
				</view>
				<view class="u-flex-1  u-text-right u-padding-left-20 u-padding-right-20">
					<view class="head-right" :style="[StateStyle]">
						{{data.showState | itemProcessShow}}
					</view>
				</view>
			</view>
		</template>
		<template #title>
			<text>{{data.title}}</text>
		</template>
		<template #bodyLeft>
			<view class="u-padding-bottom-30">

				<template v-if="[1,2,3].includes(tabCurrentIndex)">
					<view class="u-flex">
						<view class="u-flex-1">
							<CellDetail label="提出人" :value="data.sponsor"></CellDetail>
						</view>
						<view class="u-flex-1">
							<CellDetail label="调研负责人" :value="data.principalToName"></CellDetail>
						</view>
					</view>
				</template>
				<template v-else>
					<CellDetail label="提出人" :value="data.sponsor"></CellDetail>
				</template>

				<CellDetail label="提出时间" :value="data.startTime | date"></CellDetail>
				<CellDetail label="提出科室" :value="data.organizerToName"></CellDetail>
				<template v-if="[1,2,3].includes(tabCurrentIndex)">
					<CellDetail label="调研成员" :value="data.usersToName"></CellDetail>
				</template>
				<template v-else>
					<CellDetail label="期望完成日期" :value="data.endTime | date"></CellDetail>
				</template>
			</view>
		</template>

	</CardWrapper>
</template>

<script>
	import CardWrapper from '@/components/card/components/cardWrapper.vue'
	import Colors from '@/common/color.js'
	import CellDetail from '@/components/cell/itemDetail.vue'
	import State from '@/pagesDemand/state.js'
	import PagesDemandRouterConfig from '@/pagesDemand/routerConfig.js'
	export default {
		components: {
			CardWrapper,
			CellDetail,
		},


		props: {
			data: {
				type: Object,
				default: () => {}
			},
			tabCurrentIndex: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: ''
			}
		},

		computed: {
			LevelBackgroundStyle() {

				return {
					backgroundColor: State.LevelColor[this.data.level]
				}
			},
			StateStyle() {
				return {
					color: State.StateColor[this.data.showState]
				}
			}
		},
		data() {
			return {


			}
		},

		methods: {

			onCard() {
				let type = 1
				if (this.tabCurrentIndex == 0) {
					type = 4
				} else if (this.tabCurrentIndex == 1) {
					type = 0
				} else {
					type = 1
				}
				if ('WAIT_GRADING' === this.data.showState) {
					type = this.data.showState
				} else if ('demand_analysis' === this.data.showState) {
					type = this.data.showState
				} else if ('technical_analysis' === this.data.showState) {
					type = this.data.showState
				} else if ('demand_assess' === this.data.showState) {
					type = this.data.showState
				}
				const { itemCode, showState } = this.data
				let queryParams = `?itemCode=${itemCode}&type=${type}&state=${showState}`
				let url = `${PagesDemandRouterConfig.DemandDetail}${queryParams}`
				wx.navigateTo({
					url: url
				})
			},


			onQuoteButton(path) {
				const { currState, id, currStateToName } = this.data
				let queryParams = `?state=${currState}&id=${id}&currStateToName=${currStateToName}`
				let url = `${path}${queryParams}`
				wx.navigateTo({
					url: url
				})

			},


		}

	}
</script>


<style lang="scss" scoped>
	.head {
		&-left {
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
			width: 152rpx;
		}

		&-center {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-right {
			font-weight: 600;
			font-size: 28rpx;
		}
	}

	.info {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		&-label {
			flex-basis: 20%;
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-value {
			flex: 1;
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;
		}

		&+& {
			margin-top: 30rpx;
		}
	}

	.footer {
		text-align: right;
		margin-top: 60rpx;
		padding-right: 20rpx;

		>.leftButton {
			margin-right: 30rpx;
			display: inline-block
		}
	}
</style>
